<template>
  <div class="optical-module-list">
    <div class="search-bar">
      <div class="page-title">光模块</div>
      <el-input
        v-model="searchQuery"
        placeholder="搜索IP、接口、光模块类型或序列号"
        class="search-input"
        clearable
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <div class="table-container">
      <el-table
        :data="filteredOpticalModules"
        style="width: 100%"
        height="calc(100vh - 180px)"
        :border="false"
      >
        <el-table-column prop="id" label="ID" min-width="60" />
        <el-table-column prop="ip" label="IP地址" min-width="120" />
        <el-table-column prop="interface" label="接口" min-width="100" />
        <el-table-column prop="optical_module_type" label="光模块类型" min-width="120" />
        <el-table-column prop="serial_num" label="序列号" min-width="150" />
        <el-table-column prop="ent_physical_oper_status" label="物理状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="row.ent_physical_oper_status === 'online' ? 'success' : 'danger'">
                      {{ row.ent_physical_oper_status === 'online' ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="if_oper_status" label="接口状态" min-width="100">
          <template #default="{ row }">
            <el-tag :type="row.if_oper_status === 'online' ? 'success' : 'danger'">
                      {{ row.if_oper_status === 'online' ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-footer">
        <span>光模块总数：{{ filteredOpticalModules.length }}</span>
        <span class="ml-4">在线光模块：{{ filteredOpticalModules.filter(module => module.ent_physical_oper_status === 'online').length }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { CircleCheck, CircleClose, Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { BASE_URL } from '../config/env'

interface OpticalModule {
  id: number
  ip: string
  interface: string
  optical_module_type: string
  serial_num: string
  ent_physical_oper_status: string
  if_oper_status: string
}

const opticalModules = ref<OpticalModule[]>([])

const searchQuery = ref('')

const filteredOpticalModules = computed(() => {
  if (!searchQuery.value) return opticalModules.value
  const query = searchQuery.value.toLowerCase()
  return opticalModules.value.filter(module => 
    module.ip.toLowerCase().includes(query) ||
    module.interface.toLowerCase().includes(query) ||
    module.optical_module_type.toLowerCase().includes(query) ||
    module.serial_num.toLowerCase().includes(query)
  )
})

const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
}

const loadOpticalModules = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/optical-module/?skip=0&limit=100`)
    opticalModules.value = response.data
  } catch (error) {
    ElMessage.error('加载光模块列表失败')
  }
}

onMounted(() => {
  loadOpticalModules()
})
</script>

<style scoped>
.optical-module-list {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%;
  overflow-x: auto;
}

.search-bar {
  margin-bottom: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-title {
  margin-left: 20px;
  font-size: 20px;
  font-weight: 500;
  color: #409EFF;
  font-weight: bold;
}

.search-input {
  width: 300px;
  min-width: 200px;
}

.table-container {
  margin-left: 20px;
  margin-right: 20px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  width: 100% !important;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-table__cell) {
  border-left: none !important;
  border-right: none !important;
}

:deep(.el-table__header-wrapper) {
  border-bottom: 1px solid var(--el-border-color);
}

:deep(.el-table__body-wrapper) {
  border-top: 1px solid var(--el-border-color);
}

:deep(.el-tag) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 24px;
  height: 24px;
}

:deep(.el-tag .el-icon) {
  margin: 0;
  font-size: 16px;
}

.table-footer {
  margin-top: 10px;
  text-align: right;
  color: #606266;
  font-size: 14px;
}

.ml-4 {
  margin-left: 16px;
}
</style> 